<template>
	<!-- 边坡监测 -->
	<view class="p-10">
		<!-- 		<view class="bg-white p-5">
			<u-tabs lineColor="#2172FC" :current="currentKey" :list="[{name: '东帮边坡'},{name: '西帮边坡'},{name: '南帮边坡'},{name: '北帮边坡'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}"
				@change="selectChange"></u-tabs>
		</view> -->
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">传感器信息统计</text></view>
				</template>
				<my-grid :list="list" :col="2"></my-grid>
				<uni-table stripe emptyText="暂无更多数据" style="width: 100%">
					<!-- 表头行 -->
					<uni-tr style="background-color: #F5 F6FA;">
						<uni-th align="center" width="40">编号</uni-th>
						<uni-th align="center" width="40">设备名称</uni-th>
						<uni-th align="center" width="20">类型</uni-th>
						<uni-th align="center" width="40">设备状态</uni-th>
						<uni-th align="center" width="45">实时值</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData" :key="index">
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">{{item.num}}</uni-td>
						<uni-td align="center">{{item.type}}</uni-td>
						<uni-td align="center">
							<view :style="{color: item.status ==  '离线' ? '#FF4747' : '#00B578'}">{{item.status}}</view>
						</uni-td>
						<uni-td align="center">{{item.value}}</uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">边坡监测告警统计分析</text></view>
				</template>
				<view class="list-title">近30天预警次数累计 <view class="list-conten">88次</view>
				</view>
				<uni-table stripe emptyText="暂无更多数据" style="width: 100%">
					<!-- 表头行 -->
					<uni-tr style="background-color: #F5 F6FA;">
						<uni-th align="center" width="40">排名</uni-th>
						<uni-th align="center" width="40">设备名称</uni-th>
						<uni-th align="center" width="20">告警次数</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData1" :key="index">
						<uni-td align="center">{{item.index}}</uni-td>
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">{{item.num}}次</uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">告警记录列表</text></view>
				</template>
				<uni-table stripe emptyText="暂无更多数据" style="width: 100%">
					<!-- 表头行 -->
					<uni-tr style="background-color: #F5 F6FA;">
						<uni-th align="center" width="40">编号</uni-th>
						<uni-th align="center" width="40">告警设备</uni-th>
						<uni-th align="center" width="20">时间</uni-th>
						<uni-th align="center" width="40">等级</uni-th>
						<uni-th align="center" width="45">内容</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="(item,index) in tableData2" :key="index">
						<uni-td align="center">{{item.name}}</uni-td>
						<uni-td align="center">{{item.num}}</uni-td>
						<uni-td align="center">{{item.time}}</uni-td>
						<uni-td align="center">
							<view :style="{color: item.status ==  '1级' ? '#FF4747' : '#00B578'}">{{item.status}}</view>
						</uni-td>
						<uni-td align="center">{{item.value}}</uni-td>
					</uni-tr>
				</uni-table>
			</u-collapse-item>
			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">GNSS传感器监测分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="4">
				<template #title>
					<view class="content-item-title"><text class="title-txt">雷达传感器监测分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([0, 1, 2, 3, 5])
	let chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		list = ref([{
			title: '传感器数量',
			value: '30',
			unit: '个'
		}, {
			title: '传感器在线率',
			value: '30',
			unit: '%'
		}, {
			title: '正常',
			value: '20',
			unit: '个'
		}, {
			title: '离线',
			value: '35',
			unit: '个'
		}]),
		tableData = ref([{
			name: '传感器1',
			num: 'FC101',
			type: 'GNSS',
			status: '在线',
			value: '0.5mg/m³'
		}, {
			name: '传感器2',
			num: 'FC101',
			type: 'GNSS',
			status: '离线',
			value: '0.5mg/m³'
		}, {
			name: '传感器3',
			num: 'FC101',
			type: 'GNSS',
			status: '在线',
			value: '0.5mg/m³'
		}, {
			name: '传感器3',
			num: 'FC101',
			type: 'GNSS',
			status: '在线',
			value: '0.5mg/m³'
		}]),
		tableData1 = ref([{
			name: '超速',
			num: '27',
			index: '1',
		}, {
			name: '超速',
			num: 'FC101',
			index: '2',
		}, {
			name: '超速',
			num: 'FC101',
			index: '3',
		}, {
			name: '超速',
			num: 'FC101',
			index: '4',
		}]),
		tableData2 = ref([{
			name: '传感器1',
			num: 'FC101',
			time: 'GNSS',
			status: '3级',
			value: '告警内容'
		}, {
			name: '传感器2',
			num: 'FC101',
			time: 'GNSS',
			status: '3级',
			value: '告警内容'
		}, {
			name: '传感器3',
			num: 'FC101',
			time: 'GNSS',
			status: '3级',
			value: '告警内容'
		}, {
			name: '传感器3',
			num: 'FC101',
			time: 'GNSS',
			status: '3级',
			value: '告警内容'
		}]),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: true
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: '次',
					titleOffsetX: -10,
					titleOffsetY: -5
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow",
				}
			}
		},
		opts2 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: true
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: 'mm/h',
					titleOffsetX: 5,
					titleOffsetY: -5
				}]
			},
			extra: {
				area: {
					type: "straight",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: false,
					activeType: "hollow"
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				categories: ["1", "5", "10", "15", "20", "25", "30"],
				series: [{
					name: "X变形位移",
					data: [20, 40, 36, 22, 30, 28, 20]
				}, {
					name: "Y变形位移",
					data: [10, 40, 26, 22, 20, 28, 30]
				}, {
					name: "隆起或沉降位移",
					data: [50, 40, 36, 12, 10, 28, 10]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));
			let res2 = {
				series: [{
					name: "形变值",
					data: [20, 40, 36, 22, 30, 28, 10]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));
		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}
</style>